<script setup lang="ts">
import {useWindowStore} from "~/stores/pinia/useWindowStore";
const windowStore = useWindowStore();
const width = ref(24)
const height = ref(24)

const widthCheck = async () => {
  const window_width: any  = windowStore.windowWidth
  if (window_width <= 630) {

    width.value = 15
    height.value = 15
  }
}

onMounted(async () => {
  await widthCheck()
  window.addEventListener('resize', widthCheck)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', widthCheck);
});
</script>

<template>
  <button class="button">
    <svg :width=width :height=height viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 3h18c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2zm0 2v2l9 5 9-5V5H3zm0 4v12h18V9l-9 5-9-5z" fill="white"></path>
    </svg>
    <p class="text">Outlook</p>
  </button>
</template>

<style scoped lang="scss">
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
  gap: 15px;
  background-color: #181717;
  outline: 3px #181717 solid;
  outline-offset: -3px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: 400ms;
}

.button .text {
  color: white;
  font-weight: 700;
  font-size: 1em;
  transition: 400ms;
}

.button svg path {
  transition: 400ms;
}

.button:hover {
  background-color: transparent;
}

.button:hover .text {
  color: #181717;
}

.button:hover svg path {
  fill: #181717;
}
</style>
